<script lang="ts" setup>
import { computed, inject } from "vue";
import * as _ from "@usemath/utils";
import { getSize } from "../utils";

interface ColProps {
  span?: number;
  flex?: string | number;
}

const props = withDefaults(defineProps<ColProps>(), {
  span: 0,
});

const gutter = inject("gutter", 0);

const classNames = computed(() => {
  return {
    [`umi-col-${props.span}`]: props.span > 0,
  };
});

const styles = computed(() => {
  const newStyles: Record<string, string> = {};

  if (props.flex !== undefined) {
    if (props.flex === "auto") {
      newStyles.flex = `1`;
    } else {
      newStyles.flexShrink = "0";
      console.log(props.flex, Number(props.flex), gutter);
      newStyles.width = getSize(Number(props.flex) + gutter);
    }
  }

  if (_.isNumber(gutter) && gutter > 0) {
    const padding = `${gutter / 2}px`;
    newStyles.padding = `0 ${padding}`;
  } else if (_.isArray(gutter) && gutter.length >= 2) {
    const [horizontalGutter, verticalGutter] = gutter;
    newStyles.paddingLeft = newStyles.paddingRight = `${horizontalGutter / 2}px`;
    newStyles.paddingTop = newStyles.paddingBottom = `${verticalGutter / 2}px`;
  }

  return newStyles;
});
</script>

<template>
  <div class="umi-col" :class="classNames" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umi-col {
  box-sizing: border-box;

  @for $i from 1 through 24 {
    &-#{$i} {
      width: calc($i / 24) * 100%;
    }
  }
}
</style>
